<script setup>
import {ref} from "vue";
import { useRouter, useRoute } from "vue-router";
import {ElLoading, ElMessage} from "element-plus";
import {http} from "@/api";
const apiKey = 'GiftSendItem'
const router = useRouter()
const route = useRoute()
const id = route.params.id
const formData = ref([])

const formRef =  ref(null)
if (id) {
  // 获取详情
  http[apiKey].list({
    id: id
  }).then(res => {
    console.log(res)
    formData.value = res.data
  })
}
const cancel = () => {
  router.back()
}
const confirm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      const loadingInstance = ElLoading.service()
      if (id) {
        // 编辑
        http[apiKey].update({
          ...formData.value,
          id
        }).then(res => {
          ElMessage.success('编辑成功')
          router.back()
        }).finally(() => {
          loadingInstance.close()
        })
      } else {
        // 新增
        http[apiKey].create(formData.value).then(res => {
          ElMessage.success('新增成功')
          router.back()
        }).finally(() => {
          loadingInstance.close()
        })
      }
    } else {
      console.log('error submit!!')
      return false
    }
  })
}
</script>

<template>
  <PageMain title="查看" is-back>
    <div class="form-content f-c j-b">
      <el-table size="mini" :data="formData">
        <el-table-column label="姓名" prop="member.username">
        </el-table-column>
        <el-table-column label="手机" prop="member.phone">
        </el-table-column>
        <el-table-column label="头像">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <ViewImage type="image" :image-url="scope.row.avatar_url"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否领取">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-tag :type="scope.row.is_get === 0 ? 'success' : 'error'">{{ scope.row.status === 0 ? '是' : '否' }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否核销">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-tag :type="scope.row.is_use === 0 ? 'success' : 'error'">{{ scope.row.status === 0 ? '是' : '否' }}</el-tag>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </PageMain>
</template>
<style lang="scss">
</style>
